<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>蜜蜂活动</title>
		<link rel="stylesheet" type="text/css" href="../css/base.css"/>
		<link rel="stylesheet" type="text/css" href="../css/font-awesome.css"/>
		<link rel="stylesheet" type="text/css" href="../css/WT1.css"/>
        <script src="../js/fontSize.js"></script>
        <script src="../js/jquery-3.1.1.min.js"></script>
	</head>
	<body>
		<div class="header">
			小蜜蜂亲密指数大考验
		</div>
		<div class="wrapper">
			<ul class="uL">
				<li class="li">
					<span><input type="radio" class="rad" name="ss" id="ss" value="A"/><label for="ss"></label></span>&nbsp;&nbsp;A.&nbsp;&nbsp;非机动车上道。
				</li>
				<li class="li">
					<span><input type="radio" class="rad" name="ss" id="ss" value="B"/><label for="ss"></label></span>&nbsp;&nbsp;B.&nbsp;&nbsp;公司院内。
				</li>
				<li class="li">
					<span><input type="radio" class="rad" name="ss" id="ss" value="C"/><label for="ss"></label></span>&nbsp;&nbsp;C.&nbsp;&nbsp;不阻碍交通的公共停车区域。
				</li>
			</ul>
			<div class="btn-wrapper">
				<input type="button" value="上一题" disabled/>
				<input type="button" value="下一题" id="btn"/>
			</div>
		</div>
		
		
		<!--正确-->
		<div class="correct">
			<div class="c">
				 <div class="content">
				 	 <h3>恭喜你，答对了！</h3>
				 	 <p>很高兴你可以答对这智商题，快去闯下一关吧！大奖在后面！les’go</p>
				 	 <button onclick="ok()">朕知道了</button>
				 </div>
			</div>
		</div>
		<!--选择-->
		<div class="checked">
			<div class="w">
				 <div class="content">
				 	 <h3>请选择答案</h3>
				 	 <button onclick="xz()">朕知道了</button>
				 </div>
			</div>
		</div>
		<!--erroe-->
		<div class="erroe">
			<div class="e">
				 <div class="content">
				 	 <h3>很遗憾选错了！</h3>
				 	 <p>很遗憾选错了你选错了这智商题，不要哭，还有下一关，快去闯下一关吧！les’go</p>
				 	 <button onclick="xz()">朕知道了</button>
				 </div>
			</div>
		</div>
		<script>
		   var rAd = document.getElementsByClassName('rad');
		   var Lab = document.getElementsByTagName('label');
		   var bTn = document.getElementById("btn");
		   var Dis = document.getElementsByClassName("correct")[0];
		   var Diw = document.getElementsByClassName("checked")[0];
		   var Die = document.getElementsByClassName("erroe")[0];
		   for(let i = 0; i<rAd.length; i++){
		   	   rAd[i].onclick=function(){ 	
			   	   for(let j=0;j<rAd.length;j++){
			   	   	  if(rAd[j].checked == true){
			   	   	     Lab[j].style.backgroundImage="url(img/yuan3.png)"
				   	   }else{
				   	   	 Lab[j].style.backgroundImage="url(img/yuan.png)"
				   	   }
			   	   }
		   	   }
		   }
		   bTn.onclick=function(){
		   	  for(var i=0;i<rAd.length;i++){
		   	  	 if(rAd[0].checked == true){
		   	 	     Dis.style.display="block"
			   	 }else if(rAd[1].checked == false && rAd[2].checked == false && rAd[0].checked == false){
			   	 	 Diw.style.display="block"
			   	 }else if(rAd[1].checked == true || rAd[2].checked == true){
			   	 	 Die.style.display="block"
			   	 }
		   	  }
		   }
           function ok(){
               location.href="two.html"
           }
           function xz(){
               Diw.style.display="none"
               Die.style.display="none"
           }
			
		</script>
	</body>
</html>
